<template>
  <div class="user-form">
    <h2>用户信息</h2>
    <a-form>
      <a-form-item label="用户名:">
         <span>{{user.name}}</span>
      </a-form-item>
      <a-form-item label="账户等级">
        <a-tag color="blue">
          <user-outlined />
          {{user.level === 0 ? '系统管理员' : 'Lv ' + user.level}}
        </a-tag>
      </a-form-item>
      <a-form-item label="状态">
        <a-tag :color="getTagMap(statusMap, user.status).color">
          {{getTagMap(statusMap, user.status).text}}
        </a-tag>
      </a-form-item>
      <a-form-item label="注册时间: ">
        {{user.created_at}}
      </a-form-item>
    </a-form>
    <div class="change-user-info">
      <a-button type="primary" disabled>修改信息</a-button>
    </div>
    <h2 style="margin-top: 20px">账号安全</h2>
    <a-space direction="vertical" align="center">
      <SafeCard title="密码"
                icon="KeyOutlined"
                :status="true"
                desc="密码用于登录和注册博客系统，同时是您的重要凭证，请注意保存">
        <template #extra>
          <a-button type="primary"
                    @click="changePwdModal=true">修改密码</a-button>
        </template>
      </SafeCard>
      <SafeCard title="邮箱"
                desc="邮箱用于找回密码，并且用来接收系统发出的通知"
                :status="true"
                icon="MailOutlined">
        <template #extra>
          <a-space>
            <a-button type="primary" disabled>验证邮箱</a-button>
            <a-button type="primary" disabled>修改邮箱</a-button>
          </a-space>
        </template>
      </SafeCard>
    </a-space>
    <ChangePasswordModel :visible="changePwdModal"
                         :id="user.id"
                         @close="changePwdModal=false" />
  </div>
</template>

<script setup>
import {UserOutlined, KeyOutlined,MailOutlined} from "@ant-design/icons-vue";
import {apiGet} from "../../../fentch";
import {onMounted, ref} from "vue";
import {notification} from "ant-design-vue";
import SafeCard from "../../../components/admin/profile/SafeCard.vue";
import ChangePasswordModel from "../../../components/admin/profile/ChagePasswordModal.vue";

// 修改密码模态框
const changePwdModal = ref(false)

const user = ref({})

const statusMap = [
  {key: 0, color: 'green', text: '正常'},
  {key: 1, color: 'orange', text: '正在封禁'},
  {key: 2, color: 'red', text: '永久封禁'}
]

// 获取用户信息
const getUser = () => {
  apiGet('/auth/me').then(res => {
    if (res.data.code === 0) {
      user.value = res.data.data
      return
    }
    notification.error({
      description: '错误',
      message: res.data.message
    })
  })
}

const getTagMap = (map, key) => {
  const tag = map.find(i => i.key === key)
  if (!tag) {
    return {key: 0, color: '', text: '等待数据'}
  }
  return tag
}

onMounted(() => {
  getUser()
})
</script>

<style scoped>
</style>